<template>
  <div class="shopping_car">
    <NavBar title="订单详情" :isLeftBtn="false" />
    <div class="order_state">
      <div class="state_item">
        <span class="title"> 订单状态: </span>
        <span class="tag"> {{ orderDetails.orderStatusString }} </span>
      </div>
      <div class="state_item">
        <span class="title"> 订单编号: </span>
        <span class="tag"> {{ orderDetails.orderNo }} </span>
      </div>
      <div class="state_item">
        <span class="title"> 下单时间: </span>
        <span class="tag"> {{ orderDetails.payTime || "未知" }} </span>
      </div>
    </div>
    <div class="order_state">
      <div class="state_item">
        <span class="title"> 商品金额: </span>
        <span class="tag"> ￥{{ orderDetails.totalPrice }} </span>
      </div>
      <div class="state_item">
        <span class="title"> 配送方式: </span>
        <span class="tag"> 自己来拿 </span>
      </div>
    </div>
    <van-card
      v-for="item in list"
      :key="item.goodsId"
      :num="item.goodsCount"
      tag="爆款"
      :price="item.sellingPrice"
      desc="没那么多字段了!!"
      :title="item.goodsName"
      :thumb="$filters.prefix(item.goodsCoverImg)"
      :origin-price="item.sellingPrice"
    />
    <div style="height: 62px"></div>
    <div class="btns" v-if="orderDetails.orderStatusString != '手动关闭'">
      <van-button
        v-if="orderDetails.orderStatusString == '待支付'"
        size="small"
        round
        type="primary"
        style="margin-right: 10px"
        @click="handSubPlay"
        >立即支付</van-button
      >
      <van-button @click="handCancelOrder" size="small" round type="warning"
        >取消订单</van-button
      >
    </div>
    <PlayPopup @handplay="handplay" ref="playRef" />
  </div>
</template>
<script lang="ts">
// splb goodsList goods
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { cancelOrder, getOrderDetail, payOrder } from "@/utils/apis/order";
import NavBar from "@/components/NavBar.vue";
import PlayPopup from "@/components/PlayPopup.vue";
import { Dialog, Toast } from "vant";
import { Order } from "@/utils/types/order";
export default defineComponent({
  name: "orderDetails",
  components: { NavBar, PlayPopup },

  setup() {
    const state = reactive({
      list: [],
      orderDetails: {} as Order,
    });
    //获取ref 调用子组件方法
    const playRef = ref();
    const route = useRoute();
    const router = useRouter();
    const { id } = route.query;
    const init = async () => {
      //
      const res = await getOrderDetail(id);
      state.list = res.data.newBeeMallOrderItemVOS;
      state.orderDetails = res.data;
    };
    onMounted(() => {
      init();
    });
    const handSubPlay = () => {
      playRef.value.showModel();
    };
    const handplay = async (payType: number) => {
      await payOrder({ orderNo: state.orderDetails.orderNo, payType });
      Toast.success("支付成功");
      // hide
      playRef.value.hide();
      setTimeout(() => {
        router.replace({ path: "/order" });
      }, 2000);
    };
    const handCancelOrder = async () => {
      Dialog.confirm({
        title: "关闭订单",
        message: "这就不要了?",
        beforeClose: async (action: string) => {
          if (action === "confirm") {
            await cancelOrder(state.orderDetails.orderNo);
            Toast.success("关闭成功");
            setTimeout(() => {
              router.replace({ path: "/order" });
            }, 2000);
            Dialog.close();
            return true;
          } else {
            Dialog.close();
            return false;
          }
        },
      });
    };
    return {
      ...toRefs(state),
      handSubPlay,
      playRef,
      handplay,
      handCancelOrder,
    };
  },
});
</script>
<style lang="scss" scoped>
.shopping_car {
  .van-card {
    background-color: #fff;
  }
  .btns {
    background-color: #fff;
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
    box-sizing: border-box;
  }
}

.order_state {
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
  .state_item {
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      color: #999;
    }
    span {
      font-size: 14px;
    }
    .tag {
      font-size: 15px;
    }
  }
}
</style>
